<template>
	<header class="navbar fixed-top bg-light shadow">
	    <div class="container-fluid">
	        <a class="navbar-brand col-md-3  px-3" href="#">
	            <img src="/images/logo.png" height="40px" alt="">
	        </a>
					<span @click="goHome" class="goHome">返回首页</span>
	        <ul class="navbar-nav flex-row d-lg-none">
	            <li class="nav-item text-nowrap">
	                <button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
	              <svg class="bi"><use xlink:href="#search"></use></svg>
	            </button>
	            </li>
	            <li class="nav-item text-nowrap">
	                <button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
	              <svg class="bi"><use xlink:href="#list"></use></svg>
	            </button>
	            </li>
	        </ul>
	    </div>
	</header>
	<!-- 模态框开始 -->
	<div class="modal" tabindex="-1" id="searchModal">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h5 class="modal-title">标题</h5>
	                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
	            </div>
	            <div class="modal-body">
	
	                <input class="form-control" type="text" placeholder="Search">
	
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
	            </div>
	        </div>
	    </div>
	</div>
	<!-- 模态框结束 -->
</template>

<script setup>
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()  //路由器
	const route = useRoute()  //路由
	// console.log(router,route)
	
	const goHome = ()=>{
		// 返回首页
		// router.push("/")
	}
</script>

<style scoped>
	.bi {
	    display: inline-block;
	    width: 1rem;
	    height: 1rem;
	    fill: currentColor;
	}
	.goHome{
		cursor: pointer;
		font-size: 26px;
	}
</style>